<template>
  <el-card>
    <div class="box">
      <div class="PersonHeader">
        <el-button type="success" style="margin-left: 15px" @click="EstablishingFamily">组建家庭</el-button>
        <el-button type="success" @click="this.DialogAddPersonRecord = true">新增成员</el-button>
        <el-button type="primary" @click="exportToExcel()">导出Excel</el-button>
        <el-button type="primary" @click="addDisease()">疾病记录</el-button>
        <el-button type="primary" @click="openFacialCapture()">人像采集</el-button>
      </div>
      <div class="select">
        <el-form :model="form" ref="form">
          <el-input placeholder="输入姓名" v-model="form.name" class="input"></el-input>
          <el-input placeholder="输入身份证号" v-model="form.idcard" class="input"></el-input>
          <el-button type="success" @click="SelectPerson" class="button">查询</el-button>
        </el-form>
      </div>
      <div class="content">
        <!-- .slice((currentPage-1)*pageSize,currentPage*pageSize) -->
        <el-table :data="FamilyRecords.slice(
          (currentPage - 1) * pageSize,
          currentPage * pageSize
        )
          " border id="eltable" height="61vh" :header-cell-style="{ 'text-align': 'center', 'font-size': '12px' }"
          :cell-style="{ 'text-align': 'center' }">
          <el-table-column prop="name" label="操作" width="160" fixed="left">
            <template #default="scope">
              <el-button size="small" link type="primary" @click="RecordDetails(scope.row.familycode)">详情</el-button>
              <el-button size="small" link type="primary" @click="RecordEdit(scope.row.rid)">编辑</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="name" fixed label="姓名" />
          <el-table-column prop="signing" label="是否签约">
            <template #default="props">
              <el-tag :type="props.row.signing === '0' ? 'warning' : 'success'">
                {{ props.row.signing == 0 ? "未签约" : "已签约" }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="checkup" label="是否体检">
            <template #default="props">
              <el-tag :type="props.row.checkup === '0' ? 'warning' : 'success'">
                {{ props.row.checkup == 0 ? " 未体检" : "已体检" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="relation" label="与户主关系" />
          <el-table-column prop="poverty" label="人群分类">
            <template #default="props">
              <el-tag :type="props.row.poverty === '0' ? '' : 'info'">
                {{ props.row.poverty == 0 ? "普通户" : "贫困户" }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="sex" label="性别">
            <template #default="props">
              {{ props.row.sex == 0 ? "女" : "男" }}
            </template>
          </el-table-column>
          <el-table-column prop="age" label="年龄" />
          <el-table-column prop="idcard" label="身份证号" show-overflow-tooltip />
          <el-table-column prop="borthday" label="出生日期" show-overflow-tooltip />
          <el-table-column prop="telephone" label="本人电话" show-overflow-tooltip />
          <el-table-column prop="healthrecord" label="健康档案号" show-overflow-tooltip />
        </el-table>
        <div class="page">
          <el-pagination v-model:current-page="currentPage" :page-size="pageSize" layout="total, prev, pager, next"
            background :total="FamilyRecords.length" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </div>
      <!-- 添加成员 -->
      <el-dialog v-model="DialogAddPersonRecord" title="新增成员档案" style="width: 450px">
        <el-form :model="newperson" ref="newperson" :rules="rules" class="DialogAddPersonRecord">
          <el-form-item label="姓名：" prop="name">
            <el-input v-model="newperson.name" />
          </el-form-item>
          <el-form-item label="性别：" prop="age">
            <el-select v-model="newperson.sex" placeholder="请选择性别">
              <el-option label="男" value="1" />
              <el-option label="女" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="年龄：" prop="age">
            <el-input v-model="newperson.age" />
          </el-form-item>
          <el-form-item label="民族：" prop="volk">
            <el-input v-model="newperson.volk" />
          </el-form-item>
          <el-form-item label="婚姻状态：">
            <el-select v-model="newperson.maritalrelation" placeholder="请选择婚姻状态">
              <el-option label="未婚" value="未婚" />
              <el-option label="已婚" value="已婚" />
              <el-option label="离异" value="离异" />
              <el-option label="丧偶" value="丧偶" />
            </el-select>
          </el-form-item>
          <el-form-item label="联系电话：" prop="telephone">
            <el-input v-model="newperson.telephone" />
          </el-form-item>
          <el-form-item label="身份证号：" prop="idcard">
            <el-input v-model="newperson.idcard" />
          </el-form-item>
          <el-form-item label="村(居)委会：" prop="village">
            <el-select v-model="newperson.village" placeholder="请选择村(居)委会">
              <el-option label="大王村" value="大王村" />
              <el-option label="西北龙村" value="西北龙村" />
            </el-select>
          </el-form-item>
          <el-form-item label="住址：" prop="address">
            <el-input v-model="newperson.address" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="DialogAddPersonRecord = false">关闭</el-button>
            <el-button type="primary" @click="AddPersonRecord"> 添加 </el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 疾病记录 -->
      <el-dialog v-model="DialogHomeVisit" title="疾病记录表" close-on-press-escape :close-on-click-modal="false" width="480"
        custom-class="Mydialog">
        <el-form :model="submitParams" :rules="rules" ref="submitParamsForm" class="Form">
          <el-form-item label="姓名：" prop="name">
            <el-input type="text" v-model="submitParams.name" class="Form_item" />
          </el-form-item>
          <el-form-item label="性别：" prop="sex">
            <el-radio-group v-model="submitParams.sex" class="Form_item">
              <el-radio :label="1" style="margin-left: 40px">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="住址：" prop="address">
            <el-input type="text" v-model="submitParams.address" class="Form_item" />
          </el-form-item>
          <el-form-item label="身份证号" prop="idcard">
            <el-input type="text" v-model="submitParams.idcard" class="Form_item" />
          </el-form-item>
          <el-form-item label="疾病信息：" prop="disease">
            <el-input type="text" v-model="submitParams.disease" class="Form_item" />
          </el-form-item>
          <el-form-item label="本次家访状况：" prop="lastResult">
            <el-select v-model="submitParams.lastResult" placeholder="请选择家访状况" class="Form_item">
              <el-option label="良好" value="良好" />
              <el-option label="尚可" value="尚可" />
              <el-option label="注意" value="注意" />
              <el-option label="高危" value="高危" />
            </el-select>
          </el-form-item>
          <el-form-item label="本次家访结果：" prop="result">
            <el-input type="textarea" v-model="submitParams.result" :autosize="{ minRows: 2, maxRows: 4 }"
              class="Form_item" />
          </el-form-item>
          <el-form-item label="下次家访时间：" prop="nextTime">
            <el-date-picker v-model="submitParams.nextTime" type="datetime" placeholder="请选择下次家访时间"
              format="YYYY-MM-DD hh:mm:ss" value-format="x" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="closeDialog()">关闭</el-button>
            <el-button type="primary" @click="saveHomeForm()"> 保存 </el-button>
          </span>
        </template>
      </el-dialog>
      <el-dialog v-model="DialogFamilyEdit" title="家庭信息编辑" close-on-press-escape :close-on-click-modal="false"
        width="480">
        <el-form :model="editParams" ref="editParamsForm">
          <el-form-item label="家庭代码：" prop="familycode">
            <el-input v-model="editParams.familycode" style="width: 199px" disabled />
          </el-form-item>
          <el-form-item label="签约状态：" prop="signing">
            <el-select v-model="editParams.signing">
              <el-option label="未签约" value="0" />
              <el-option label="已签约" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="体检状态：" prop="checkup">
            <el-select v-model="editParams.checkup">
              <el-option label="已体检" value="1" />
              <el-option label="未体检" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="人群分类：" prop="poverty">
            <el-select v-model="editParams.poverty">
              <el-option label="普通户" value="0" />
              <el-option label="贫困户" value="1" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="closeDialog()">关闭</el-button>
            <el-button type="primary" @click="RecordEditSave()">
              保存
            </el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 人像采集 -->
      <el-dialog title="人像采集" v-model="DialogFacialCapture" width="500px">
        <el-form :model="Record" class="Record" :rules="rules" ref="Record">
          <el-form-item label="居民照片：" prop="fileList" :label-width="formLabelWidth">
            <div class="upload">
              <el-upload :file-list="fileList" ref="uploadComp" :auto-upload="false" :data="Record"
                list-type="picture-card" limit="1" @change="handleFileChange">
                <el-icon>
                  <Plus />
                </el-icon>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item label="身份证号：" prop="idcard">
            <el-input type="text" v-model="Record.idcard" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="closeDialog()">关闭</el-button>
            <el-button type="primary" @click="saveFacialPhoto()">
              保存
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
import * as XLSX from "xlsx";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref } from "vue";
import { recordFamilyList, familyEdit } from "@/api/record.js";
import { pageMixin } from "@/mixins/pageMixin";
import { recordMixin } from "@/mixins/recordMixin";
export default {
  mixins: [pageMixin, recordMixin],
  data() {
    return {
      DialogFamilyEdit: false,
      FamilyRecords: [],
      editParams: {},
    };
  },
  created() {
    this.fetchRecord();
  },
  methods: {
    /**
     * 一般方法
     */
    exportToExcel() {
      const worksheet = XLSX.utils.json_to_sheet(this.FamilyRecords);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
      XLSX.writeFile(workbook, "家庭档案信息.xlsx");
    },
    fetchRecord() {
      recordFamilyList().then((res) => {
        this.FamilyRecords = res.data.data;
      });
    },
    RecordDetails(familycode) {
      this.$router.push(`/record/family/details?familycode=${familycode}`);
    },
    RecordEdit(rid) {
      for (var i = 0; i < this.FamilyRecords.length; i++) {
        if (rid == this.FamilyRecords[i].rid) {
          this.editParams = this.FamilyRecords[i];
          break;
        }
      }
      // this.editParams.familycode = familycode;
      this.DialogFamilyEdit = true;
    },
    RecordEditSave() {
      // console.log(this.editParams);
      familyEdit(this.editParams).then((res) => {
        if (res.data.code == 200) {
          ElMessage({
            message: "信息编辑成功",
            type: "success",
          });
          this.fetchRecord();
          this.closeDialog();
        } else {
          ElMessage({
            message: "信息编辑失败",
            type: "error",
          });
          this.fetchRecord();
          this.closeDialog();
        }
      });
    },
  },
};
</script>
<style>
::v-deep .Record .el-form-item__label {
  width: 175px;
}

.Record .el-input {
  width: 170px;
}

.el-form-item__label {
  width: 125px !important;
  /* border: 1px solid red !important; */
}

.DialogAddPersonRecord .el-input {
  width: 200px;
}
</style>
<style scoped>
::v-deep .Record .el-form-item__label {
  width: 175px;
}

.upload {
  width: 148px;
  height: 148px;
  overflow: hidden;
}

.Record .el-input {
  width: 170px;
}

.box {
  height: auto;
  width: 100%;
}

.PersonHeader {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.PersonHeader,
.select {
  width: 1920px;
  height: 40px;
}

.input {
  margin-top: 4px;
  margin-left: 10px;
  margin-right: 15px;
  width: 200px;
}

.select {
  margin-top: 5px;
  border: 1px solid black;
}

.select span {
  font-size: 14px;
  display: flex;
  align-items: center;
}

.page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 20px;
  align-items: end;
  width: 100%;
  height: 40px;
  background-color: white;
}

::v-deep .Mydialog {
  border-radius: 20px;
}

.Form {
  align-items: center;
}

.Form_item {
  width: 220px;
}
</style>
